1
00:00:00,300 --> 00:00:03,210
Now we have to add some items to our shop frame.

2
00:00:03,210 --> 00:00:04,330
Let's go to our starter.

3
00:00:04,740 --> 00:00:06,210
Open it up Screen gooey.

4
00:00:06,240 --> 00:00:08,220
Open that up shop frame.

5
00:00:08,400 --> 00:00:11,910
And on the shop frame, I'm going to change the background.

6
00:00:11,910 --> 00:00:12,990
The background color.

7
00:00:12,990 --> 00:00:15,330
So the shot frame selected.

8
00:00:15,330 --> 00:00:17,450
Let's go to background color three.

9
00:00:17,460 --> 00:00:20,790
I'm going to hit that little white dot and hit the purple.

10
00:00:22,110 --> 00:00:26,220
I want to make that purple lighter, but it doesn't go any higher up here, so I'm going to change it

11
00:00:26,220 --> 00:00:26,990
by hand.

12
00:00:27,000 --> 00:00:30,390
I'm going to do 200 on the red.

13
00:00:32,260 --> 00:00:34,480
200 on the green hit.

14
00:00:34,480 --> 00:00:35,200
Och.

15
00:00:35,230 --> 00:00:36,280
That's pretty good.

16
00:00:36,610 --> 00:00:40,150
And on the shop frame, I'm going to hit the plus sign again.

17
00:00:40,510 --> 00:00:44,350
I'm going to do an CC for scrolling frame.

18
00:00:44,350 --> 00:00:50,110
Scrolling frames are cool because you could fit a lot more stuff on there than the size would normally

19
00:00:50,110 --> 00:00:51,820
permit because you have a scroll bar.

20
00:00:51,970 --> 00:00:57,460
Let's change the scrolling frame name to items frame.

21
00:00:58,360 --> 00:01:01,340
And we got a position that right because it's on our top bar.

22
00:01:01,360 --> 00:01:05,730
So let's go down to possession.

23
00:01:06,700 --> 00:01:08,650
I'm just going I'm going to keep the x the same.

24
00:01:08,650 --> 00:01:11,840
So zero and zero for pixel and scale.

25
00:01:11,860 --> 00:01:18,240
I'm going to move the Y down scale .10 pixel offset.

26
00:01:18,250 --> 00:01:19,050
Perfect.

27
00:01:19,060 --> 00:01:25,060
And then for the size, I'm going to stretch that 50% of my window.

28
00:01:25,060 --> 00:01:29,260
So I'll do a 0.5 in the x zero pixel offset.

29
00:01:29,320 --> 00:01:31,270
I want it to go all the way down to the bottom.

30
00:01:31,270 --> 00:01:35,750
But remember, we have 10% of it that's being taken up by the top bar.

31
00:01:35,770 --> 00:01:40,630
So I'm going to do a 0.9 on the Y zero pixel offset.

32
00:01:41,050 --> 00:01:42,180
That's pretty good.

33
00:01:42,190 --> 00:01:47,230
Let's make this transparent so we can see the purple color.

34
00:01:47,440 --> 00:01:49,510
Let's go to background transparency.

35
00:01:49,620 --> 00:01:51,970
Make that one nice.

36
00:01:51,970 --> 00:01:54,310
This bar is too thick, right?

37
00:01:54,310 --> 00:01:57,250
Our scroll bar is too thick, taking up too much real estate.

38
00:01:57,340 --> 00:01:59,710
Let's go and change that.

39
00:01:59,920 --> 00:02:02,860
We're going to find scrollbar thickness.

40
00:02:02,860 --> 00:02:04,000
It's 12 pixels.

41
00:02:04,000 --> 00:02:05,500
I'm going to make it five.

42
00:02:06,580 --> 00:02:07,180
Cool.

43
00:02:07,180 --> 00:02:13,120
Now, if you need to make this scroll frame bigger, go up to canvas size.

44
00:02:13,120 --> 00:02:15,850
You can make the x bigger too.

45
00:02:15,850 --> 00:02:18,610
And then you'd have a scrollbar on the x on the bottom.

46
00:02:18,730 --> 00:02:20,650
Or you can make this y bigger.

47
00:02:20,650 --> 00:02:26,860
Like if you needed to fit a whole bunch of items, it defaults to two times the size of the parent object

48
00:02:26,860 --> 00:02:30,790
or of the the scroll bar, the scroll frame object.

49
00:02:30,790 --> 00:02:35,080
So you could make it like four and it'd be 400% on the Y.

50
00:02:35,110 --> 00:02:40,870
That's pretty convenient, but I'm going to keep it at two and then we'll expand it out if we need to.

51
00:02:41,380 --> 00:02:48,720
All right, on the items frame, I want to add items, so let's hit the plus sign on the items frame.

52
00:02:48,730 --> 00:02:49,510
I'm going to add a.

53
00:02:50,230 --> 00:02:57,950
Let's add a UI list layout first and that's going to take care of where our stuff is going to be organized.

54
00:02:57,970 --> 00:03:01,100
We don't have to match up our positions.

55
00:03:01,120 --> 00:03:03,580
Hit the plus sign again.

56
00:03:03,580 --> 00:03:05,290
Add a text button.

57
00:03:05,290 --> 00:03:07,240
This is going to be an item.

58
00:03:07,510 --> 00:03:12,760
So I'm going to call this item button.

59
00:03:13,180 --> 00:03:13,370
Right?

60
00:03:13,510 --> 00:03:15,070
And they're all going to be called item button.

61
00:03:15,070 --> 00:03:17,860
We're going to add a lot of stuff with code to keep this flexible.

62
00:03:18,070 --> 00:03:21,460
So let's change the size of that.

63
00:03:22,350 --> 00:03:25,640
Well, I see my font might as well change font first, right?

64
00:03:25,650 --> 00:03:26,820
Because I see it.

65
00:03:27,450 --> 00:03:28,550
And we'll go to comic.

66
00:03:28,560 --> 00:03:30,000
That's what we were using.

67
00:03:31,050 --> 00:03:33,120
And there's our text.

68
00:03:33,150 --> 00:03:34,230
Keep the text the same.

69
00:03:34,230 --> 00:03:35,910
We're going to change that with code.

70
00:03:36,180 --> 00:03:37,950
Here's our text scaled.

71
00:03:38,810 --> 00:03:39,950
Go ahead and press that.

72
00:03:39,980 --> 00:03:43,550
Now, let's scroll up and change our size and position.

73
00:03:43,700 --> 00:03:46,300
Since I was there, I just wanted to change it there.

74
00:03:46,310 --> 00:03:52,070
Size position is going to be handled with the UI list layout, so I don't need to do anything there

75
00:03:52,070 --> 00:03:55,940
but the size I'm going to keep the size.

76
00:03:56,210 --> 00:04:06,710
Let's get 100% on the x so one and then zero pixel offset for the x for the Y, I'm going to do a 0.1

77
00:04:06,710 --> 00:04:09,200
and zero pixel offset.

78
00:04:09,230 --> 00:04:11,100
Notice how big that is.

79
00:04:11,120 --> 00:04:13,310
That's because my canvas size is big.

80
00:04:13,310 --> 00:04:22,880
So it's it's 10% of the canvas size, not 10% of the scroll bar or the scroll frame size.

81
00:04:23,330 --> 00:04:23,810
All right.

82
00:04:23,810 --> 00:04:27,500
I'm going to make this transparent, slightly transparent.

83
00:04:27,910 --> 00:04:29,450
Let's where's my transparency?

84
00:04:29,450 --> 00:04:30,050
Oh, background.

85
00:04:30,050 --> 00:04:30,800
Transparency.

86
00:04:30,800 --> 00:04:31,540
Here it is.

87
00:04:31,550 --> 00:04:34,850
I'll make it like 70% transparent.

88
00:04:34,850 --> 00:04:38,060
That way I can kind of see it, but I can still see the purple.

89
00:04:38,920 --> 00:04:39,780
Nice.

90
00:04:39,790 --> 00:04:48,790
And let's go to our items button and I'm going to hit the plus do s t for string value.

91
00:04:48,970 --> 00:04:51,370
And this is going to hold our image.

92
00:04:51,370 --> 00:04:54,880
So when we preview, it's going to show the image that's in the tool.

93
00:04:54,880 --> 00:05:05,110
So I'm going to call this image I d I'll just duplicate that control D We want the name here, so let's

94
00:05:05,110 --> 00:05:10,480
call it item name and then I'm going to add another one for the price.

95
00:05:10,480 --> 00:05:13,600
I'm going to add an int value hit the plus.

96
00:05:16,070 --> 00:05:17,480
And value.

97
00:05:17,480 --> 00:05:19,130
That's going to be the price.

98
00:05:21,760 --> 00:05:22,410
Cool.

99
00:05:22,420 --> 00:05:25,560
Now we'll put our simple pistol stuff in there.

100
00:05:25,570 --> 00:05:26,140
Let's.

101
00:05:26,320 --> 00:05:29,800
Let's scroll up to our replicated storage.

102
00:05:29,950 --> 00:05:32,180
There's our simple pistol.

103
00:05:32,200 --> 00:05:33,760
Here's our texture ID.

104
00:05:33,790 --> 00:05:36,430
This is going to be the image it's going to show in the preview.

105
00:05:36,460 --> 00:05:38,860
We don't have a preview yet, but we will.

106
00:05:38,860 --> 00:05:42,850
If I click on it, I can copy this.

107
00:05:43,800 --> 00:05:44,850
Copy.

108
00:05:44,910 --> 00:05:46,920
And then I'm going to go down here.

109
00:05:46,920 --> 00:05:49,410
I'm going to put my image ID in here.

110
00:05:51,630 --> 00:05:53,280
I need the name.

111
00:05:53,670 --> 00:05:55,650
So you have to make sure you spell it right.

112
00:05:55,680 --> 00:05:56,730
There's a simple pistol.

113
00:05:56,730 --> 00:05:58,110
We don't have a space in there.

114
00:05:58,110 --> 00:05:59,520
We could add a space.

115
00:05:59,670 --> 00:06:03,060
But if you do add a space, you have to change it down here.

116
00:06:03,690 --> 00:06:06,090
I didn't make this too sophisticated.

117
00:06:07,140 --> 00:06:11,960
As do control V got our item name Price.

118
00:06:11,970 --> 00:06:16,440
We're just going to type that in 1000.

119
00:06:18,700 --> 00:06:24,970
Let's add the code that we're going to need for the shop script so that we can at least see the item

120
00:06:25,210 --> 00:06:26,350
correctly.

121
00:06:26,620 --> 00:06:26,950
All right.

122
00:06:26,950 --> 00:06:29,950
So we don't have a lot going on here in the shop script yet.

123
00:06:31,000 --> 00:06:37,600
Let's go ahead and add a variable and I'll do I'll do one for the items frame.

124
00:06:37,600 --> 00:06:50,470
So I'll say items Frame is going to equal shop frame and we'll do a weight for child items frame.

125
00:06:50,920 --> 00:06:56,560
I'm going to do another variable for buttons and we're going to make a table of buttons.

126
00:06:57,910 --> 00:06:59,560
What else will I need?

127
00:07:00,850 --> 00:07:02,440
I'm going to do a for loop.

128
00:07:02,590 --> 00:07:10,660
When the script starts up, it's going to fire off this for loop through for I and V in pairs.

129
00:07:10,660 --> 00:07:17,070
We get my items, frame colon, get children do.

130
00:07:17,080 --> 00:07:22,000
So it's going to get everything on the items frame, including the UI list layout.

131
00:07:22,000 --> 00:07:23,350
So we have to be careful.

132
00:07:23,980 --> 00:07:28,330
I'm going to say v or if v v is the item.

133
00:07:28,330 --> 00:07:32,380
So it's either a UI list layout or a item or a text button.

134
00:07:33,100 --> 00:07:37,780
I'm going to check to see if it is a text button.

135
00:07:40,120 --> 00:07:47,410
Then v dot text is going to equal v dot item.

136
00:07:47,410 --> 00:07:50,410
What do I call that item name?

137
00:07:50,890 --> 00:07:52,120
It's on my button.

138
00:07:52,120 --> 00:07:53,500
It doesn't pop up though.

139
00:07:53,500 --> 00:07:55,660
Oh, remember it's a value two, right?

140
00:07:55,660 --> 00:07:57,420
It's a string value.

141
00:07:57,430 --> 00:08:00,130
And then what happens if we press that button?

142
00:08:00,130 --> 00:08:10,270
Well, we're going to do the activated here, V activated connect, put a function here, and maybe

143
00:08:10,270 --> 00:08:12,250
we'll do a print out or something.

144
00:08:12,670 --> 00:08:17,260
Print V equals v dot.

145
00:08:18,050 --> 00:08:18,830
Item name.

146
00:08:18,830 --> 00:08:20,720
Right o text.

147
00:08:20,720 --> 00:08:21,530
Let's do text.

148
00:08:21,530 --> 00:08:22,160
There we go.

149
00:08:22,160 --> 00:08:26,420
This is just a test we're going to we're going to delete that and then put a node here.

150
00:08:26,420 --> 00:08:33,940
This is where we're going to preview our item preview item, and then I'll pass in the V.

151
00:08:33,950 --> 00:08:37,160
So we're going to do a preview for the button that we press.

152
00:08:37,550 --> 00:08:39,320
And what else am I going to need here?

153
00:08:40,580 --> 00:08:44,900
I'm going to insert I'll do a table insert.

154
00:08:45,610 --> 00:08:49,180
And Buttons is the name of the table.

155
00:08:49,480 --> 00:08:51,400
V is the button.

156
00:08:52,420 --> 00:08:54,370
All right, that's pretty cool.

157
00:08:54,580 --> 00:08:56,360
Let's go ahead and try that out.

158
00:08:56,380 --> 00:08:58,210
Let's hit the play button.

159
00:08:58,870 --> 00:09:00,700
I'm going to go to view.

160
00:09:01,730 --> 00:09:02,750
Output.

161
00:09:04,150 --> 00:09:05,740
When I hit that little bell.

162
00:09:06,340 --> 00:09:09,100
Dang, we hit a pistol.

163
00:09:09,520 --> 00:09:11,340
Oh, look at that simple pistol.

164
00:09:11,350 --> 00:09:12,460
We got the print out.

165
00:09:12,490 --> 00:09:13,810
We don't have a preview yet.

166
00:09:13,810 --> 00:09:15,070
We're going to do it over here.

167
00:09:15,070 --> 00:09:21,770
But let's add another button to this window to see how easy it is.

168
00:09:21,790 --> 00:09:28,010
Let's go over to my zombie game, and here's my items button.

169
00:09:28,030 --> 00:09:31,450
I'm going to do a control D to duplicate it.

170
00:09:31,720 --> 00:09:33,300
I'm going to open that up.

171
00:09:33,310 --> 00:09:36,130
I need to change my ID to the lemon.

172
00:09:36,340 --> 00:09:38,020
Fabulous lemon.

173
00:09:39,330 --> 00:09:41,250
And copy that.

174
00:09:41,280 --> 00:09:43,430
That's my that's the tool.

175
00:09:43,440 --> 00:09:45,120
The tool image.

176
00:09:46,420 --> 00:09:49,690
So what I call that image ID, that's what I want.

177
00:09:49,720 --> 00:09:53,530
Control V So make sure you update your image.

178
00:09:53,560 --> 00:09:57,280
We need the fabulous lemon name.

179
00:09:58,030 --> 00:09:58,870
All right.

180
00:09:59,050 --> 00:10:00,670
Control C.

181
00:10:02,330 --> 00:10:04,950
There's a name Control V.

182
00:10:04,970 --> 00:10:09,860
Remember, there's a space in there that might that might cause a little bit extra work in the future,

183
00:10:09,860 --> 00:10:11,420
but I think it's worth it.

184
00:10:11,420 --> 00:10:12,500
And then we'll call that.

185
00:10:12,500 --> 00:10:14,390
We'll make that 2000.

186
00:10:15,950 --> 00:10:17,330
Now let's play it.

187
00:10:24,830 --> 00:10:25,580
Ding.

188
00:10:25,580 --> 00:10:28,850
Let's see our view output.

189
00:10:29,150 --> 00:10:30,670
And we've got our pistol.

190
00:10:30,680 --> 00:10:32,000
Simple pistol.

191
00:10:32,360 --> 00:10:33,350
Fabulous.

192
00:10:33,350 --> 00:10:37,640
LEMON So you can see that it's going to be easy to expand this.